<template>
  <el-container>
    <el-main class="main flexCenter">
      <div class="table-main">
        <div class="tableName">{{ tableName }}</div>
        <div class="sub-tableName">
          <div class="time"><span>检查时间：</span>{{ form.created_time }}</div>
          <div class="No">
            <span>编号：</span>
            <el-input v-model="form.tableNo" placeholder="请输入编号" />
          </div>
        </div>
        <table border="1" cellpadding="0" cellspacing="0" class="table">
          <tr>
            <td class="text">单位名称</td>
            <td colspan="3">
              <el-input v-model="tableHeaderForm.unitName" placeholder="单位名称(盖章)" />
            </td>
            <td class="text">负 责 人</td>
            <td colspan="2">
              <el-input v-model="tableHeaderForm.person" placeholder="请输入负责人" />
            </td>
          </tr>
          <tr>
            <td class="text">单位地址</td>
            <td colspan="3">
              <el-input v-model="tableHeaderForm.address" placeholder="请输入单位地址" />
            </td>
            <td class="text">邮政编码</td>
            <td colspan="2">
              <el-input v-model="form.code" placeholder="请输入邮政编码" />
            </td>
          </tr>
          <tr>
            <td class="text">联 系 人</td>
            <td colspan="3">
              <el-input v-model="tableHeaderForm.person" placeholder="请输入联系人" />
            </td>
            <td class="text">联系电话</td>
            <td colspan="2">
              <el-input v-model="tableHeaderForm.telephone" maxlength="11" placeholder="请输入联系电话" />
            </td>
          </tr>
          <tr>
            <td class="text">单位基本概况</td>
            <td colspan="5">
              <el-input v-model="tableHeaderForm.jbqk" type="textarea" rows="2" placeholder="请输入单位基本概况" />
            </td>
          </tr>

          <tr>
            <td rowspan="14" class="text">防雷安全责任制度落实情况</td>
            <td colspan="3" class="text">是否建立防雷安全责任制</td>
            <td colspan="2">
              <el-radio-group v-model="form.sfjlflanzrz" class="radio-group">
                <el-radio :label="0">否</el-radio>
                <el-radio :label="1">是</el-radio>
              </el-radio-group>
            </td>
          </tr>
          <tr>
            <td colspan="11" class="text">
              <div v-for="(item,index) in filterFiles('sfjlflanzrz')" :key="index" class="file-list">
                <div v-for="(link,fileIndex) in item.files" :key="fileIndex" class="file">
                  <div class="btn" @click="handleDownload(link)">{{link | splitName}}</div>
                </div>
              </div>
            </td>
          </tr>

          <tr>
            <td colspan="3" class="text">是否定期对雷电防护装置进行维护</td>
            <td colspan="2">
              <el-radio-group v-model="form.sfdqdldfhzzjxwh" class="radio-group">
                <el-radio :label="0">否</el-radio>
                <el-radio :label="1">是</el-radio>
              </el-radio-group>
            </td>
          </tr>
          <tr>
            <td colspan="11" class="text">
              <div v-for="(item,index) in filterFiles('sfdqdldfhzzjxwh')" :key="index" class="file-list">
                <div v-for="(link,fileIndex) in item.files" :key="fileIndex" class="file">
                  <div class="btn" @click="handleDownload(link)">{{link | splitName}}</div>
                </div>
              </div>
            </td>
          </tr>

          <tr>
            <td colspan="3" class="text">是否将防雷安全纳入应急管理</td>
            <td colspan="2">
              <el-radio-group v-model="form.sfjflaqnryjgl" class="radio-group">
                <el-radio :label="0">否</el-radio>
                <el-radio :label="1">是</el-radio>
              </el-radio-group>
            </td>
          </tr>
          <tr>
            <td colspan="11" class="text">
              <div v-for="(item,index) in filterFiles('sfjflaqnryjgl')" :key="index" class="file-list">
                <div v-for="(link,fileIndex) in item.files" :key="fileIndex" class="file">
                  <div class="btn" @click="handleDownload(link)">{{link | splitName}}</div>
                </div>
              </div>
            </td>
          </tr>

          <tr>
            <td colspan="3" class="text">是否建立防雷安全工作档案</td>
            <td colspan="2">
              <el-radio-group v-model="form.sfjlflaqgzda" class="radio-group">
                <el-radio :label="0">否</el-radio>
                <el-radio :label="1">是</el-radio>
              </el-radio-group>
            </td>
          </tr>
          <tr>
            <td colspan="11" class="text">
              <div v-for="(item,index) in filterFiles('sfjlflaqgzda')" :key="index" class="file-list">
                <div v-for="(link,fileIndex) in item.files" :key="fileIndex" class="file">
                  <div class="btn" @click="handleDownload(link)">{{link | splitName}}</div>
                </div>

              </div>
            </td>
          </tr>

          <tr>
            <td colspan="3" class="text">
              是否按要求配备专（兼）防雷安全管理员
            </td>
            <td colspan="2">
              <el-radio-group v-model="form.sfayjpbangly" class="radio-group">
                <el-radio :label="0">否</el-radio>
                <el-radio :label="1">是</el-radio>
              </el-radio-group>
            </td>
          </tr>
          <tr>
            <td colspan="11" class="text">
              <div v-for="(item,index) in filterFiles('sfayjpbangly')" :key="index" class="file-list">
                <div v-for="(link,fileIndex) in item.files" :key="fileIndex" class="file">
                  <div class="btn" @click="handleDownload(link)">{{link | splitName}}</div>
                </div>
              </div>
            </td>
          </tr>

          <tr>
            <td colspan="3" class="text">是否对防雷安全存在问题进行整改</td>
            <td colspan="2">
              <el-radio-group v-model="form.sfdflanczwtjxxg" class="radio-group">
                <el-radio :label="0">否</el-radio>
                <el-radio :label="1">是</el-radio>
              </el-radio-group>
            </td>
          </tr>
          <tr>
            <td colspan="11" class="text">
              <div v-for="(item,index) in filterFiles('sfdflanczwtjxxg')" :key="index" class="file-list">
                <div v-for="(link,fileIndex) in item.files" :key="fileIndex" class="file">
                  <div class="btn" @click="handleDownload(link)">{{link | splitName}}</div>
                </div>
              </div>
            </td>
          </tr>

          <tr>
            <td colspan="3" class="text">是否有进行定期的防雷安全教育</td>
            <td colspan="2">
              <el-radio-group v-model="form.sfyjxdqaqjy" class="radio-group">
                <el-radio :label="0">否</el-radio>
                <el-radio :label="1">是</el-radio>
              </el-radio-group>
            </td>
          </tr>
          <tr>
            <td colspan="11" class="text">
              <div v-for="(item,index) in filterFiles('sfyjxdqaqjy')" :key="index" class="file-list">
                <div v-for="(link,fileIndex) in item.files" :key="fileIndex" class="file">
                  <div class="btn" @click="handleDownload(link)">{{link | splitName}}</div>
                </div>
              </div>
            </td>
          </tr>

          <tr>
            <td rowspan="12" class="text">雷电防护装置安全性能状况</td>
            <td colspan="3" class="text">
              各场所是否按照国家防雷技术标准和法规规定安装雷电防护装置
            </td>
            <td colspan="2">
              <el-radio-group v-model="form.gcssfazbzazldfhzz" class="radio-group">
                <el-radio :label="0">否</el-radio>
                <el-radio :label="1">是</el-radio>
              </el-radio-group>
            </td>
          </tr>
          <tr>
            <td colspan="11" class="text">
              <div v-for="(item,index) in filterFiles('gcssfazbzazldfhzz')" :key="index" class="file-list">
                <div v-for="(link,fileIndex) in item.files" :key="fileIndex" class="file">
                  <div class="btn" @click="handleDownload(link)">{{link | splitName}}</div>
                </div>
              </div>
            </td>
          </tr>

          <tr>
            <td colspan="2" rowspan="4" class="text">
              是否委托具有资质的检测机构依法开展每年一次（易燃易爆场所一年两次）雷电防护装置安全性能定期检测
            </td>
            <td class="text">已全部按要求定期检测</td>
            <td class="text">检测时间</td>
            <td>
              <el-date-picker v-model="form.ldfhzz_jcsj" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间" />
            </td>
          </tr>
          <tr>
            <td rowspan="2" class="text">部分按要求定期检测</td>
            <td class="text">已检项目数</td>
            <td>
              <el-input v-model="form.ldfhzz_yjcxms" min="0" type="number" placeholder="请输入已检项目数" />
            </td>
          </tr>
          <tr>
            <td class="text">未检项目数</td>
            <td>
              <el-input v-model="form.ldfhzz_wjcxms" min="0" type="number" placeholder="请输入未检项目数" />
            </td>
          </tr>
          <tr>
            <td colspan="2" class="text">多年未检测</td>
            <td>
              <el-radio-group v-model="form.ldfhzz_sfdnwjc" class="radio-group">
                <el-radio :label="0">否</el-radio>
                <el-radio :label="1">是</el-radio>
              </el-radio-group>
            </td>
          </tr>

          <tr>
            <td colspan="3" class="text">雷电防护装置定期检测是否全部合格</td>
            <td colspan="2">
              <el-radio-group v-model="form.ldfhzz_sfqbhg" class="radio-group">
                <el-radio :label="0">否</el-radio>
                <el-radio :label="1">是</el-radio>
              </el-radio-group>
            </td>
          </tr>
          <tr>
            <td colspan="11" class="text">
              <div v-for="(item,index) in filterFiles('ldfhzzsfqbhg')" :key="index" class="file-list">
                <div v-for="(link,fileIndex) in item.files" :key="fileIndex" class="file">
                  <div class="btn" @click="handleDownload(link)">{{link | splitName}}</div>
                </div>
              </div>
            </td>
          </tr>

          <tr>
            <td colspan="3" class="text">历史上发生的雷击灾情情况</td>
            <td colspan="2">
              <el-input v-model="form.ldfhzz_lsljzq" placeholder="请输入历史上发生的雷击灾情情况" />
            </td>
          </tr>
          <tr>
            <td colspan="11" class="text">
              <div v-for="(item,index) in filterFiles('ldfhzzLsljzq')" :key="index" class="file-list">
                <div v-for="(link,fileIndex) in item.files" :key="fileIndex" class="file">
                  <div class="btn" @click="handleDownload(link)">{{link | splitName}}</div>
                </div>
              </div>
            </td>
          </tr>

          <tr>
            <td colspan="3" class="text">
              新（改、扩）建项目雷电防护装置是否依法报请设计审核和竣工验收
            </td>
            <td colspan="2">
              <el-radio-group v-model="form.ldfhzz_sfyfshhys" class="radio-group">
                <el-radio :label="0">否</el-radio>
                <el-radio :label="1">是</el-radio>
              </el-radio-group>
            </td>
          </tr>
          <tr>
            <td colspan="11" class="text">
              <div v-for="(item,index) in filterFiles('ldfhzzsfyfshhys')" :key="index" class="file-list">
                <div v-for="(link,fileIndex) in item.files" :key="fileIndex" class="file">
                  <div class="btn" @click="handleDownload(link)">{{link | splitName}}</div>
                </div>
              </div>
            </td>
          </tr>

          <tr>
            <td class="text">防雷安全存在问题等级</td>
            <td colspan="5">
              <el-radio-group v-model="form.lp_problem_level" class="radio-group">
                <el-radio :label="0">一级(特大）</el-radio>
                <el-radio :label="1">二级（重大）</el-radio>
                <el-radio :label="2">三级（严重）</el-radio>
                <el-radio :label="3">四级（一般）</el-radio>
              </el-radio-group>
            </td>
          </tr>
          <tr>
            <td class="text">防雷安全存在问题和初步整改计划</td>
            <td colspan="5">
              <el-input v-model="form.flaqczwthcbzgjh" type="textarea" rows="3" placeholder="请输入防雷安全存在问题和初步整改计划" />
            </td>
          </tr>
        </table>

        <div class="foot-table">
          <div class="name">
            <span>检查人员（签名）:</span>
            <el-input v-model="form.creator" placeholder="请输入检查人员" />
          </div>
          <div class="unit">
            <span>被检单位（签名）：</span>
            <el-input v-model="form.inspect_unit_sign" placeholder="请输入被检单位" />
          </div>
        </div>
        <div class="text-center">
          <el-button type="primary" v-loading.fullscreen.lock="fullscreenLoading" element-loading-text="正在提交签署文件，请稍后……" @click="handleSubmit">提交并签署</el-button>
          <el-button @click="$router.push('/onlineCheckList')">返回</el-button>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import { mapGetters } from "vuex"
import translate from "@/utils/translate"
import { postDataAdd, createFlowInspect, findInspectProofs } from "./api"
import { getToken } from "@/utils/auth"
export default {
  name: "Table",
  data() {
    return {
      tableName: "衢州市防雷安全检查表",
      tableHeaderForm: {
        userId: "",
        unitName: "",
        address: "",
        person: "",
        telephone: "",
        remark: "",
      },
      form: {
        plan_detail_id: null,
        "cmdb!modelId": 18,
        lp_unit_id: null,
        sfjlflanzrz: 0,
        sfdqdldfhzzjxwh: 0,
        sfjflaqnryjgl: 0,
        sfjlflaqgzda: 0,
        sfayjpbangly: 0,
        sfdflanczwtjxxg: 0,
        sfyjxdqaqjy: 0,
        gcssfazbzazldfhzz: 0,
        ldfhzz_jcsj: null,
        ldfhzz_yjcxms: 0,
        ldfhzz_wjcxms: 0,
        ldfhzz_sfdnwjc: 0,
        ldfhzz_sfqbhg: 0,
        ldfhzz_lsljzq: "暂无",
        ldfhzz_sfyfshhys: 0,
        lp_problem_level: 3,
        flaqczwthcbzgjh: "",
        creator: "",
        created_time: "",
        inspect_unit_sign: "",
        image_urls: "",
        plan_id: null,
      },
      fullscreenLoading: false,
      uploadResponseList: []
    }
  },
  computed: {
    filterFiles(type) {
      return function inner(type) {
        let dealFiles = []
        this.uploadResponseList.filter(item => item.inspectItem === type).map(_item => {
          let dealFilesObj = {
            files: [],
            proofId: '',
          }
          _item.fileUrls.split(',').map(res => {
            if (res) {
              dealFilesObj.files.push(res)
              dealFilesObj.proofId = _item.proofId
            }
          })
          dealFiles.push(dealFilesObj)
        })
        return dealFiles
      }
    },
    ...mapGetters(["userInfo"]),
  },
  filters: {
    splitName(href) {
      const name = href.substring(href.lastIndexOf("/") + 1)
      return name
    }
  },
  created() {
    const {
      userId,
      unitName,
      address,
      person,
      telephone,
      remark,
      id,
      plan_detail_id,
    } = this.$route.query
    this.tableHeaderForm = {
      userId,
      unitName,
      address,
      person,
      telephone,
      remark,
    }
    this.form.creator = this.userInfo.userName
    this.form.plan_detail_id = plan_detail_id
    this.form.created_time = translate.formatNowDate("yyyy-MM-dd HH:mm:ss")
    this.form.inspect_unit_sign = unitName
    this.form.lp_unit_id = id
    this.form.plan_id = id

    this.getInspectProofs()
  },
  methods: {
    handleSubmit() {
      this.$confirm("您确认要提交吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        const formData = JSON.stringify(this.form)
        postDataAdd({
          masterJSONString: formData,
        })
          .then(({ success, message, data }) => {
            if (success) {
              this.$message.success(message)
              const inspect_id = data.modelData ? data.modelData.inspect_id ? data.modelData.inspect_id : '' : ''
              if (!inspect_id) {
                this.$message.error('检查ID不能为空！')
                return
              }
              setTimeout(() => {
                this.handleSign(inspect_id)
                // this.$router.push('/onlineCheckList')
              }, 500)
            } else {
              this.$message.error(message)
            }
          })
          .catch((err) => {
            console.log(
              err
            )
          })
      })
    },
    handleSign(inspectId) {
      // var integrityurl = "https://www.baidu.com"
      var integrityurl = encodeURIComponent(
        `https://qzqxj.zonewee.com/cma/#/readTable?detailId=${this.form.plan_detail_id}&showBtn=0&accessToken=${getToken()}`
      )
      // var integrityurl =
      //   window.location.href + `&accessToken=${getToken()}&showBtn=0`;
      console.log(
        "🚀 ~ file: sign.vue ~ line 324 ~ handleSubmit ~ integrityurl",
        integrityurl
      )
      this.fullscreenLoading = true
      createFlowInspect({
        url: integrityurl,
        inspectId,
      })
        .then(({ success, message }) => {
          if (success) {
            // this.$message.success(message);
            // this.sign_url = data
            this.$router.push({
              name: 'signIframe',
              query: {
                detailId: this.form.plan_detail_id
              }
            })
          } else {
            this.$message.error(message)
          }
          this.fullscreenLoading = false
        })
        .catch((err) => {
          console.log(
            err
          )
        }).finally(() => {
          this.fullscreenLoading = false
        })
    },
    // 获取上传信息
    getInspectProofs() {
      findInspectProofs({ detailId: this.form.plan_detail_id })
        .then(({ data }) => {
          this.uploadResponseList = data
        })
        .catch((err) => {
          console.log(
            "🚀 ~ file: sign.vue ~ line 305 ~ getInitData ~ err",
            err
          )
        })
    },
    // 下载
    handleDownload(link) {
      const name = link.substring(link.lastIndexOf("/") + 1)
      const a_link = document.createElement("a")  // 生成一个a链接
      fetch(link)    // 括号里是文件链接
        .then((res) => res.blob())
        .then((blob) => {
          // 将链接地址字符内容转变成blob地址
          a_link.href = URL.createObjectURL(blob)
          a_link.download = name //下载的文件的名字
          document.body.appendChild(a_link)
          a_link.click()
        })
    }
  },
};
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  .table-main {
    width: 800px;
    background: #fff;
    padding: 20px;
    box-sizing: border-box;
  }
}
.flexCenter {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tableName {
  font-weight: bold;
  font-size: 20px;
  width: 100%;
  text-align: center;
  margin-bottom: 8px;
}
.sub-tableName {
  margin-bottom: 16px;
  display: flex;
  width: 100%;
  justify-content: space-between;
  font-size: 14px;
  align-items: center;
  .No {
    display: flex;
    width: 250px;
    margin-left: 16px;
    align-items: center;
    span {
      white-space: nowrap;
    }
    ::v-deep .el-input__inner {
      border: none;
      // border-radius: 0;
    }
  }
}
.foot-table {
  display: flex;
  width: 100%;
  font-size: 14px;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  margin-bottom: 20px;
  > div {
    display: flex;
    margin-left: 16px;
    align-items: center;
    flex: 1;
    span {
      white-space: nowrap;
    }
    ::v-deep .el-input__inner {
      border: none;
      // border-radius: 0;
    }
  }
}
.table {
  width: 100%;
  border: 1px solid #f2f2f2;
  tr {
    td {
      border: 1px solid #f2f2f2;
      color: #555;
      min-width: 120px;
      font-size: 14px;
      &.text {
        padding: 0 12px;
      }
    }
  }
  .radio-group {
    height: 40px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-around;
  }
  ::v-deep .el-input__inner {
    border: none;
    // border-radius: 0;
  }
  ::v-deep .el-textarea__inner {
    border: none;
  }
}
</style>
